<template>
	<navbar></navbar>
	<textNavbar myprops="帮助"></textNavbar>
	<view class="assist">
		<view class="assist-top">
			<view class="service-content-top">
				<text>问题类型</text>
			</view>
			<view class="assist-top-content">
				<view class="assist-top-content-vw" @click="rmwt">
					<image src="../../../static/热门问题.png" mode=""></image>
					<text>热门问题</text>
				</view>
				<view class="assist-top-content-vw" @click="zxgz">
					<image src="../../../static/咨询规则.png" mode=""></image>
					<text>咨询规则</text>
				</view>
				<view class="assist-top-content-vw" @click="ysbh">
					<image src="../../../static/隐私保护.png" mode=""></image>
					<text>隐私保护</text>
				</view>
				<view class="assist-top-content-vw" @click="tkts">
					<image src="../../../static/退款投诉.png" mode=""></image>
					<text>退款投诉</text>
				</view>
			</view>
		</view>
		<!-- 热门问题 -->
		<view class="assist-content" v-show="current == 1">
			<view class="service-content-top">
				<text>热门问题</text>
			</view>
			<view>
				<van-cell-group>
				  <van-cell :title="i.title" is-link v-for="i in rmList" :key="i.id" @click="jump(i.id)" />
				</van-cell-group>
			</view>
		</view>
		<!-- 咨询规则 -->
		<view class="assist-content" v-show="current == 2">
			<view class="service-content-top">
				<text>咨询规则</text>
			</view>
			<view>
				<van-cell-group>
				  <van-cell :title="item.title" is-link v-for="item in zxList" :key="item.id" @click="jump(item.id)" />
				</van-cell-group>
			</view>
		</view>
		<!-- 隐私保护 -->
		<view class="assist-content" v-show="current == 3">
			<view class="service-content-top">
				<text>隐私保护</text>
			</view>
			<view>
				<van-cell-group>
				  <van-cell :title="item.title" is-link v-for="item in ysList" :key="item.id" @click="jump(item.id)" />
				</van-cell-group>
			</view>
		</view>
		<!-- 退款投诉 -->
		<view class="assist-content" v-show="current == 4">
			<view class="service-content-top">
				<text>退款投诉</text>
			</view>
			<view>
				<van-cell-group>
				  <van-cell :title="item.title" is-link v-for="item in tkList" :key="item.id" @click="jump(item.id)" />
				</van-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	import { hotArticle, getservice, articleDetail } from '../../../utils/utils';
	export default {
		data() {
			return {
				current: 1, // 当前标签页
				rmList: [], // 热门问题初始数组
				zxList: [], // 咨询规则初始数组
				ysList: [], // 隐私保护初始数组
				tkList: [], // 退款投诉初始数组
			}
		},
		onLoad() {
			hotArticle((e) => {
				console.log('热门文章', e);
				this.rmList = [...e.data.article]
				// console.log(this.rmList);
			})
			let a = { cid: '6' }
			let b = { cid: '7' }
			let c = { cid: '8' }
			getservice(a, (res) => {
				console.log('咨询规则', res.data);
				this.zxList = [res.data.article];
				// console.log(this.zxList);
			})
			getservice(b, (c) => {
				console.log('隐私保护', c);
				this.ysList = [c.data.article]
				// console.log(this.ysList);
			})
			getservice(c, (d) => {
				console.log('退款投诉', d);
				this.tkList = [d.data.article]
				// console.log(this.tkList);
			})
		},
		methods: {
			// 热门问题标签页
			rmwt () {
				this.current = 1
			},
			// 咨询规则标签页
			zxgz () {
				this.current = 2
			},
			// 隐私保护标签页
			ysbh () {
				this.current = 3
			},
			// 退款投诉标签页
			tkts () {
				this.current = 4
			},
			jump (i) {
				console.log(i);
				let a = {
					id: String(i)
				}
				uni.navigateTo({
					url: `/pages/Attorney side/assistContent/assistContent?id=${i}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.service-content-top {
		height: 60rpx;
		background-color: #EDEDED;
		color: #b1b1b3;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}
	.service-content-top > text {
		margin-left: 20rpx;
	}
	
	.assist-top-content {
		width: 80vw;
		height: 160rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.assist-top-content-vw {
		width: 56px;
		height: 60px;
		font-size: 14px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.assist-top-content-vw > image {
		width: 72rpx;
		height: 72rpx;
	}
	
	
	
</style>
